<template>
    <div id="app">
        <div style="margin-bottom:10px;">
            <t-button @click="visibleBody = true">添加优惠券</t-button>
        </div>
        <t-loading :loading="loading" size="medium" show-overlay>

            <t-base-table stripe bordered hover row-key="id" :data="coupon" :columns="columns" :max-height="'70vh'"
                :pagination="{ total: coupon.length }">
                <template #discountmoney="{ col, row }">
                    <t-tag theme="warning" shape="round">￥{{ row.discountmoney }}</t-tag>
                </template>
                <template #btns="{ col, row }">
                    <t-button @click="changeCouponData(row.id)">修改</t-button>
                    <t-popconfirm @confirm="deleteCounpon(row.id)" content="确认删除吗">
                        <t-button theme="danger">删除</t-button>
                    </t-popconfirm>
                </template>
            </t-base-table>
        </t-loading>

        <!-- 新增数据输入框 -->
        <t-dialog :footer="false" v-model:visible="visibleBody" attach="body" header="添加标签"
            :on-confirm="() => (visibleBody = false)">
            <template #body>
                <t-form ref="formValidatorStatus" :data="addCoupon" :rules="rules" @submit="onSubmit" @reset="onReset"
                    @validate="onValidate">
                    <t-form-item label="优惠券名称" name="name">
                        <t-input v-model="addCoupon.name" placeholder="请输入优惠券名称"></t-input>
                    </t-form-item>
                    <t-form-item label="折扣金额" name="discountmoney">
                        <t-input v-model.number="addCoupon.discountmoney" placeholder="请输入折扣金额"></t-input>
                    </t-form-item>
                    <t-form-item label="积分消耗" name="price">
                        <t-input v-model.number="addCoupon.price" placeholder="请输入积分消耗"></t-input>
                    </t-form-item>
                    <t-form-item :status-icon="false">
                        <t-space size="small">
                            <t-button theme="primary" type="submit">提交</t-button>
                            <t-button theme="default" variant="base" type="reset">重置</t-button>
                        </t-space>
                    </t-form-item>
                </t-form>
            </template>
        </t-dialog>

        <!-- 修改数据输入框 -->
        <t-dialog :footer="false" v-model:visible="visibleBody2" attach="body" header="修改优惠券"
            :on-confirm="() => (visibleBody = false)">
            <template #body>
                <t-form ref="formValidatorStatus" :data="changeCounpon" :rules="rules" @submit="onSubmit2"
                    @reset="onReset" @validate="onValidate">
                    <t-form-item label="优惠券名称" name="name">
                        <t-input v-model="changeCounpon.name" placeholder="请输入优惠券名称"></t-input>
                    </t-form-item>
                    <t-form-item label="折扣金额" name="discountmoney">
                        <t-input v-model.number="changeCounpon.discountmoney" placeholder="请输入折扣金额"></t-input>
                    </t-form-item>
                    <t-form-item label="积分消耗" name="price">
                        <t-input v-model.number="changeCounpon.price" placeholder="请输入积分消耗"></t-input>
                    </t-form-item>
                    <t-form-item :status-icon="false">
                        <t-space size="small">
                            <t-button theme="primary" type="submit">提交</t-button>
                        </t-space>
                    </t-form-item>
                </t-form>
            </template>
        </t-dialog>
    </div>
</template>

<script setup>
import { getCoupon, addCouponAjax, deleteCouponData, ChangeCouponAjax } from '@/http/modules/store'
import { ref, toRaw } from '@vue/reactivity'
import { MessagePlugin } from 'tdesign-vue-next';
const coupon = ref([]);
const visibleBody = ref(false);
const visibleBody2 = ref(false);
const loading = ref(true)
const addCoupon = ref({
    price: '',
    name: '',
    discountmoney: ""
})
const changeCouponData = (id) => {
    visibleBody2.value = true;

    const nowCoupon = coupon.value.find(n => n.id == id);
    changeCounpon.value = nowCoupon
}
const changeCounpon = ref({
    id: '',
    price: '',
    name: '',
    discountmoney: ""
})
const onSubmit2 = async ({ validateResult, firstError, e }) => {
    e.preventDefault();
    if (validateResult === true) {
        console.log(toRaw(changeCounpon.value));
        const res = await ChangeCouponAjax(toRaw(changeCounpon.value));
        if (res.code == 200) {
            MessagePlugin.success(`修改优惠券${changeCounpon.value.name}成功`);
            getCouponData()
            visibleBody2.value = false
        }
    } else {
        console.log('Validate Errors: ', firstError, validateResult);
        MessagePlugin.warning(firstError);
    }
}
// 表单规则
const rules = {
    name: [
        { required: true, message: '优惠券名称必填', type: 'error' },
        {
            min: 2,
            message: '优惠券名称至少需要两个字',
            type: 'error',
            trigger: 'blur',
        },
    ],
    price: [
        { required: true, message: '折扣金额必填', type: 'error' },
    ],
    discountmoney: [
        { required: true, message: '积分消耗必填', type: 'error' },
    ]
};

const columns = [
    {
        width: '100',
        colKey: 'id',
        title: '序号',
        // 对齐方式
        align: 'center',
        // 设置列类名
        className: 'custom-column-class-name',
        // 设置列属性
        attrs: {
            'data-id': 'first-column',
        },
    },
    {
        colKey: 'name',
        title: '优惠券名',
    },
    {
        colKey: "discountmoney",
        title: "折扣金额",
        cell: 'discountmoney'
    },
    {
        colKey: 'price',
        title: '积分消耗',
    },
    {
        colKey: 'price',
        title: '操作',
        cell: "btns"
    }

];
const getCouponData = () => {
    getCoupon().then(res => {
        coupon.value = res.data;
        loading.value = false
    })
}
getCouponData()
// addCoupon(obj)

const deleteCounpon = (id) => {
    deleteCouponData(id).then(res => {
        MessagePlugin.success(`删除成功`);
        getCouponData()
    })
}

const onSubmit = async ({ validateResult, firstError, e }) => {
    e.preventDefault();
    if (validateResult === true) {
        const res = await addCouponAjax(addCoupon.value);
        if (res.code == 200) {
            MessagePlugin.success(`提交优惠券${addCoupon.value.name}成功`);
            getCouponData()
            addCoupon.value = {
                price: '',
                name: '',
                discountmoney: ""
            }
            visibleBody.value = false
        }
    } else {
        console.log('Validate Errors: ', firstError, validateResult);
        MessagePlugin.warning(firstError);
    }
};


const onReset = () => {
    addCoupon.value = {
        price: '',
        name: '',
        discountmoney: ""
    }
    MessagePlugin.success('重置成功');
}
</script>
 
<style lang="less" scoped>

</style>